<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.7/index.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./css/elementUI.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.26.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.3/qs.min.js"></script>
    <title>elementUI英雄联盟大图</title>
</head>

<body>
    <div id="root">
        <h3 :style=" style_h3 " >英雄高清大图</h3>
        <el-row :gutter="20">
            <el-col :span="20" :offset="2"><div class="grid-content bg-purple">
                <el-carousel :interval="4000" type="card" height="350px">
                    <el-carousel-item v-for=" (item,index) in hero " :key="item.id">
                        <img :src=" item.poster " class="medium img" >
                    </el-carousel-item>
                </el-carousel>
            </div></el-col>
          </el-row>
    </div>

    <script>
        let http_ajax = axios.create({
            baseURL: 'http://api.xiaohigh.com'
        })

        const vm = new Vue({

            async created() {

                let result = await http_ajax.get('/lol')

                this.hero = result

            },

            beforeCreate() {
                http_ajax.interceptors.response.use((response) => {
                    response.data.splice(20)
                    return response.data
                }, (error) => {
                    return Promise.reject(error)
                })
            },

            data(){
                return{
                    hero:[],
                    style_h3:{color:'#fff',marginTop:'20px'}
                }
            }
        }).$mount('#root')
    </script>
</body>

</html>